<template>
  <layout-content>
    <div class="bg-default">
      <div class="user-center-hd">
        <div class="avatar" @click="showImagePreview()">
          <img v-if="userInfo.photo.length>0" :src="fn.getImgUrl(userInfo.photo)" alt="">
        </div>
        <div class="avatar-info">
          <div @click="goMine()" class="name">{{userInfo.fullname}}</div>
          <div class="content">执法证号：{{userInfo.zfzh}}</div>
        </div>
      </div>

      <ul class="btn-list">
       <li @click="goSafe()"><i class="icon icon-1"></i> <span class="text">账户与安全</span> <div class="arrow"></div></li>
       <li><i class="icon icon-2"></i> <span class="text">检查与更新</span> <div class="arrow"></div></li>
      </ul>
      <ul class="btn-list">
       <li><i class="icon icon-3"></i> <span class="text">使用帮助</span> <div class="arrow"></div></li>
      </ul>
      <ul class="btn-list">
       <li @click="loginOutConfirm()"><i class="icon icon-4"></i> <span class="text">退出当前账户</span> <div class="arrow"></div></li>
      </ul>
    </div>
  </layout-content>
</template>

<script>
  import tools from '@/utils/tools'
  export default {
    name: '',
    data () {
      return {
        fn: tools,
        data: {},
        userInfo: this.$store.state.userInfo,
      }
    },
    computed: {
    },
    methods: {
      goSafe () {
        this.go('safe')
      },
      goMine () {
        this.go('mine')
      },
      go (name) {
        this.$router.push({name: name})
      },
      loginOutConfirm () {
        let me = this
        this.$createDialog({
          type: 'confirm',
          // icon: 'cubeic-alert',
          title: '温馨提示',
          content: '确定退出当前账户？',
          confirmBtn: {
            text: '确定退出',
            active: true,
            disabled: false,
            href: 'javascript:;'
          },
          cancelBtn: {
            text: '取消退出',
            active: false,
            disabled: false,
            href: 'javascript:;'
          },
          onConfirm: () => {
            me.loginOut()
          },
          onCancel: () => {
          }
        }).show()
      },
      loginOut () {
        this.$localStorage.remove('userInfo')
        this.$router.replace({name: 'login'})
      },
      showImagePreview () {
        if (this.userInfo.photo.length < 1) {
          return false
        }
        let imgs = [this.fn.getImgUrl(this.userInfo.photo)]
        this.$createImagePreview({
          initialIndex: 0,
          imgs: imgs
        }, (h) => {
          return h('div', {
            class: {
              'image-preview-custom-header': false
            },
            slot: 'header'
          }, '')
        }).show()
      }
    }
  }
</script>

<style scoped lang="">

</style>
